<!--
 * Copyright ©
 * #
 * @author: zw
 * @date: 2024-01-21
 -->

<template>
  <div class="section-group">
    <h3 class="h-6 my-2 text-lg font-semibold">外形</h3>
    <hr class="mb-1.5" />

    <p class="h-6 mt-0.5 clear-both">
      <span class="leading-loose">头部背景</span>
      <span class="color-picker" @click="showColorPicker('fill')" :style="{ background: groupData.fill }">
        <el-color-picker v-model="groupData.fill" @active-change="updateHeadFill" />
      </span>
    </p>

    <p class="h-6 mt-0.5 clear-both">
      <span class="leading-loose">颜色</span>
      <span class="color-picker" @click="showColorPicker('textfill')" :style="{ background: groupData.textFill }">
        <el-color-picker v-model="groupData.textFill" @active-change="updateTextFill" />
      </span>
    </p>

    <p class="h-6 mt-0.5 clear-both">
      <span class="leading-loose">背景</span>
      <span class="color-picker" @click="showColorPicker('groupfill')" :style="{ background: groupData.groupFill }">
        <el-color-picker v-model="groupData.groupFill" @active-change="updateFill" />
      </span>
    </p>

    <p class="h-6 mt-0.5 clear-both">
      <span class="leading-loose">边框</span>
      <span class="color-picker" @click="showColorPicker('stroke')" :style="{ background: groupData.stroke }">
        <el-color-picker v-model="groupData.stroke" @active-change="updateStroke" />
      </span>
    </p>

    <p>
      <el-checkbox v-model="groupData.showHead" label="显示头部" size="small" @change="headVisible" />
    </p>
  </div>

  <div class="section-group">
    <h3 class="h-6 my-2 text-lg font-semibold">文字</h3>
    <hr class="mb-1.5" />

    <span class="leading-loose">大小</span>

    <el-popover :visible="groupData.fontsizeshow" placement="bottom">
      <template #reference>
        <span class="text-center float-right color-picker" @click="showColorPicker('fontsize'), (groupData.fontsizeshow = true)">{{ groupData.fontSize }}</span>
      </template>

      <ul>
        <li class="text-xs font-semibold px-1 hover:bg-gray-400 hover:text-white" v-for="item in fontsize" :key="item" @click="pickFontSize(item), (groupData.fontsizeshow = false)">{{ item }}</li>
      </ul>
    </el-popover>

    <p class="h-6 mt-0.5 clear-both">
      <span class="leading-loose">样式</span>
      <span class="textPos float-right iconfont icon-qingxie" @click="setStyle" :class="{ active: groupData.fontStyle === 'italic' }"></span>
      <span class="textPos float-right iconfont icon-jiacu" @click="setBold" :class="{ active: groupData.fontWeight === 'bold' }"></span>
    </p>

    <p class="h-6 mt-0.5 clear-both">
      <span class="leading-loose">对齐方式</span>
      <span class="textPos float-right iconfont icon-juyou" @click="setTextPos('insideRight')" :class="{ active: groupData.textPosition === 'insideRight' }"></span>
      <span class="textPos float-right iconfont icon-juzhong1" @click="setTextPos('inside')" :class="{ active: groupData.textPosition === 'inside' }"></span>
      <span class="textPos float-right iconfont icon-juzuo" @click="setTextPos('insideLeft')" :class="{ active: groupData.textPosition === 'insideLeft' }"></span>
    </p>
  </div>
</template>

<script>
//  import {} from ''
export default {
  name: "group",
  emits: ["change-group"],
  props: ["group"],
  data() {
    return {
      fontsize: [12, 14, 16, 18, 20, 24, 28, 32, 36, 40],
      groupData: {
        fillshow: false,
        strokeshow: false,
        textfillshow: false,
        fontsizeshow: false,
        groupfillshow: false,

        showHead: true,
        groupFill: "", //整体背景
        stroke: "", //描边
        fill: "", //头部背景
        textAlign: "left",
        fontSize: 14,
        fontStyle: "",
        fontWeight: "",
        textFill: "",
      },
    };
  },

  mounted() {},

  methods: {
    showColorPicker(mark) {
      switch (mark) {
        case "groupfill":
          this.groupData.strokeshow = false;
          this.groupData.textfillshow = false;
          this.groupData.fontsizeshow = false;
          this.groupData.fillshow = false;
          if (this.groupData.groupfillshow) {
            this.groupData.groupfillshow = false;
          } else {
            this.groupData.groupfillshow = true;
          }
          break;
        case "stroke":
          this.groupData.fillshow = false;
          this.groupData.textfillshow = false;
          this.groupData.fontsizeshow = false;
          this.groupData.groupfillshow = false;
          if (this.groupData.strokeshow) {
            this.groupData.strokeshow = false;
          } else {
            this.groupData.strokeshow = true;
          }
          break;
        case "textfill":
          this.groupData.fillshow = false;
          this.groupData.strokeshow = false;
          this.groupData.fontsizeshow = false;
          this.groupData.groupfillshow = false;
          if (this.groupData.textfillshow) {
            this.groupData.textfillshow = false;
          } else {
            this.groupData.textfillshow = true;
          }
          break;
        case "fontsize":
          this.groupData.fillshow = false;
          this.groupData.strokeshow = false;
          this.groupData.textfillshow = false;
          this.groupData.groupfillshow = false;
          if (this.groupData.fontsizeshow) {
            this.groupData.fontsizeshow = false;
          } else {
            this.groupData.fontsizeshow = true;
          }
          break;
        case "fill":
          this.groupData.groupfillshow = false;
          this.groupData.strokeshow = false;
          this.groupData.textfillshow = false;
          this.groupData.fontsizeshow = false;
          if (this.groupData.fillshow) {
            this.groupData.fillshow = false;
          } else {
            this.groupData.fillshow = true;
          }
          break;
      }
    },

    headVisible(val) {
      if (!this.group) return;
      this.$emit("changeGroup", { mark: "showHead", showHead: val, group: this.group });
    },

    updateFill(color) {
      if (!this.group) return;
      this.groupData.groupFill = color;
      this.$emit("change-group", { mark: "group", style: { fill: color }, group: this.group });
    },

    updateStroke(color) {
      if (!this.group) return;
      this.groupData.stroke = color;
      this.$emit("change-group", { mark: "group", style: { stroke: color }, group: this.group });
    },

    pickFontSize(fontsize) {
      if (!this.group) return;
      if (this.groupData.fontSize != fontsize) {
        this.groupData.fontSize = fontsize;
        this.$emit("change-group", { mark: "head", style: { fontSize: fontsize }, group: this.group });
      }
    },

    updateTextFill(color) {
      if (!this.group) return;
      this.groupData.textFill = color;
      this.$emit("change-group", { mark: "head", style: { textFill: color }, group: this.group });
    },

    setStyle() {
      if (!this.group) return;
      if (this.groupData.fontStyle == "italic") {
        this.groupData.fontStyle = "";
        this.$emit("change-group", { mark: "head", style: { fontStyle: "" }, group: this.group });
      } else {
        this.groupData.fontStyle = "italic";
        this.$emit("change-group", { mark: "head", style: { fontStyle: "italic" }, group: this.group });
      }
    },

    setBold() {
      if (!this.group) return;
      if (this.groupData.fontWeight == "bold") {
        this.groupData.fontWeight = "";
        this.$emit("change-group", { mark: "head", style: { fontWeight: "" }, group: this.group });
      } else {
        this.groupData.fontWeight = "bold";
        this.$emit("change-group", { mark: "head", style: { fontWeight: "bold" }, group: this.group });
      }
    },

    updateHeadFill(color) {
      if (!this.group) return;
      this.groupData.fill = color;
      this.$emit("change-group", { mark: "head", style: { fill: color }, group: this.group });
    },

    setTextPos(pos) {
      if (!this.group) return;
      if (this.groupData.textPosition !== pos) return;
      this.groupData.textPosition = pos;
      this.$emit("change-group", { mark: "head", style: { textPosition: pos }, group: this.group });
    },
  },

  watch: {
    group: {
      handler(val) {
        if (!val) return;
        this.groupData = { ...this.groupData, ...this.group.getStyle() };
      },
      deep: true,
    },
  },
  //  End
};
</script>

<style lang="scss" scoped>
.section-group {
  padding: 0 10px;
  font-size: 12px;
  clear: both;
}

.color-picker {
  float: right;
  display: block;
  width: 24px;
  height: 24px;
  border: 1px solid #f5f5f5;
  line-height: 24px;
}

.font-size-select {
  position: absolute;
  width: 240px;
  border: 1px solid #f5f5f5;
  z-index: 20;
  background: #fff;
  right: 0;
  line-height: 20px;
  padding: 6px;
}

.textPos {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 1px solid #f5f5f5;
  text-align: center;
  line-height: 24px;
  margin-left: 1px;
  border-radius: 3px;
  .textPos.active {
    background: #409eff;
    color: #fff;
  }
}
</style>
